<template>
  <div
    class=""
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <el-row>
      <el-col :span="24">
        <aps-form
          :config="apsForm.formConfig"
          :model="apsForm.formData"
          :formRef="apsForm.formRef"
          :labelWidth="apsForm.labelWidth"
          ref="form"
        ></aps-form>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10" style="margin-bottom: 20px">
      <el-col :span="8">
        <Title name="设备预警概况" :line="false">
          <div slot="">
            <energyPiechart :chartData="pieData" />
          </div>
        </Title>
      </el-col>
      <el-col :span="8">
        <Title name="用能单位预警top7" :line="false">
          <div slot="">
            <el-row>
              <el-col :span="24" class="inline">
                <el-radio-group v-model="radio1" @input="handlerChangeradio(1)">
                  <el-radio :label="'0'">黑榜</el-radio>
                  <el-radio :label="'1'">红榜</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <energyBarchart :chartData="barData" />
              </el-col>
            </el-row>
          </div>
        </Title>
      </el-col>
      <el-col :span="8">
        <Title name="能耗终端预警top7" :line="false">
          <div slot="">
            <el-row>
              <el-col :span="24" class="inline">
                <el-radio-group v-model="radio2" @input="handlerChangeradio(2)">
                  <el-radio :label="'0'">黑榜</el-radio>
                  <el-radio :label="'1'">红榜</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <energyBarchart2 :chartData="barData2" />
              </el-col>
            </el-row>
          </div>
        </Title>
      </el-col>
    </el-row> -->
    <lb-table
      ref="table"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      height="680"
      background
      border
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 40, 60, 80]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
    >
    </lb-table>
  </div>
</template>

<script>
import energyPiechart from "@/views/statistics/energy/components/behaviorC/energyPiechart.vue";
import energyBarchart from "@/views/statistics/energy/components/behaviorC/energyBarchart.vue";
import energyBarchart2 from "@/views/statistics/energy/components/behaviorC/energyBarchart2.vue";
import CascaderSelect from "@/components/Select/CascaderSelect";
import RemoteSelect from "@/components/Select/RemoteSelect";
import DictionariesSelect from "@/components/DictionariesSelect/index.vue";
import {
  getDetailpie,
  getList,
  getDepttop,
  getMonitoringtop,
} from "@/api/iot/energyabnormal.js";
export default {
  components: {
    energyPiechart,
    energyBarchart,
    energyBarchart2,
    CascaderSelect,
    RemoteSelect,
    DictionariesSelect,
  },
  data() {
    return {
      netwoekChose: null,
      extraParams: {},
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            startAndend: {
              label: "日期范围:",
              typeName: "el-date-picker",
              type: "datetimerange",
              size: "small",
              "start-placeholder": "请选择开始日期时间",
              "end-placeholder": "请选择结束日期时间",
              "value-format": "yyyy-MM-dd HH:mm:ss",
            },
            sysDeptId: {
              label: "用能单位:",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let valNum = that.$refs?.form?.getFieldsValue().sysDeptId;
                return (
                  <div>
                    <CascaderSelect
                      value={valNum}
                      values={valNum}
                      varient={"energy"}
                      size={"small"}
                      filterable={true}
                      placeholder={"请选择用能单位"}
                      onInput={that.handlerLiandong}
                    ></CascaderSelect>
                  </div>
                );
              },
            },
            monitoringNetworkId: {
              label: "能耗终端:",
              typeName: "el-select",
              render: () => {
                let that = this;
                return (
                  <div>
                    <RemoteSelect
                      v-model={that.netwoekChose}
                      varient="networks"
                      extraParams={that.extraParams}
                      placeholder={"请选择能耗终端"}
                      size={"small"}
                      filterable={true}
                      onInput={that.choseNetwork}
                    ></RemoteSelect>
                  </div>
                );
              },
            },
            cardNum: {
              label: "物联网卡号:",
              typeName: "el-input",
              clearable: true,
              placeholder: "请输入物联网卡号",
            },
            deviceCode: {
              label: "设备编码:",
              typeName: "el-input",
              clearable: true,
              placeholder: "请输入设备编码",
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      pieData: {
        total: 0,
        seriesData: [],
      },
      radio1: "0",
      radio2: "0",
      barData: {
        yAxisData: ["用能单位"],
        seriesData: [],
      },
      barData2: {
        xAxisData: ["能耗终端"],
        seriesData: [],
      },
      tableData: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceCode",
            label: "设备编号",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "alarmType",
            label: "报警类型",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "timeInterval",
            label: "报警持续时间（秒）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "startTime",
            label: "开始时间",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "endTime",
            label: "结束时间",
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 20,
      total: 0,
      queryParams: {},
    };
  },
  created() {},
  mounted() {
    this.handlerSearchDetail();
  },
  methods: {
    handlerSearchDetail() {
      const { startAndend, ...other } = this.$refs?.form?.getFieldsValue();
      const data = {
        ...other,
        monitoringNetworkId: this.netwoekChose,
      };
      if (startAndend) {
        data.startTime = startAndend[0];
        data.endTime = startAndend[1];
      }
      this.queryParams = data;
      // console.log(this.queryParams, "qqcs");
      this.getList(this.queryParams);
      // this.getpieData(this.queryParams);
      // this.getbarData(this.queryParams);
      // this.getbarData2(this.queryParams);
    },
    getList(data) {
      let params = { ...data };
      params.pageSize = this.pageSize;
      params.pageNum = this.currentPage;
      this.$store.commit("app/updateApiCount", "add");
      getList(params)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          // console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.tableData.data = res?.rows ?? [];
          this.total = res?.total ?? 0;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!200501");
        });
    },
    getpieData(data) {
      getDetailpie(data)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let requestObj = res?.data ?? {};
          let seriesDataArr = [];
          let totalNum = 0;
          if (Object.keys(requestObj).length > 0) {
            for (var key in requestObj) {
              // console.log(key, "key");
              // console.log(requestObj[key], "value");
              let obj = {
                name: key,
                value: requestObj[key],
              };
              if (obj.name != "总数") {
                seriesDataArr.push(obj);
              } else {
                totalNum = obj.value;
              }
            }
          }
          this.pieData = {
            total: totalNum,
            seriesData: seriesDataArr,
          };
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200500");
        });
    },
    getbarData(data) {
      let params = { ...data };
      params.listFlag = this.radio1;
      params.cardNum = null;
      params.deviceCode = null;
      getDepttop(params)
        .then((res) => {
          // console.log(res, "depttop");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          let seriesDataArr = [];
          if (arr.length > 0) {
            arr.map((item, index) => {
              let obj = {
                // name: "第" + (index + 1) + "名：" + item.name,
                name: item.name,
                type: "bar",
                key: index,
                label: {
                  show: true,
                  position: "right",
                },
                data: [item.num],
              };
              seriesDataArr.push(obj);
            });
          }
          this.barData = {
            yAxisData: ["用能单位"],
            seriesData: seriesDataArr,
          };
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200502");
        });
    },
    getbarData2(data) {
      let params = { ...data };
      params.listFlag = this.radio2;
      params.cardNum = null;
      params.deviceCode = null;
      getMonitoringtop(params)
        .then((res) => {
          // console.log(res, "monitoringtop");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          let seriesDataArr = [];
          if (arr.length > 0) {
            arr.map((item, index) => {
              let obj = {
                // name: "第" + (index + 1) + "名：" + item.name,
                name: item.name,
                type: "bar",
                key: index,
                data: [item.num],
                label: {
                  show: true,
                  position: "top",
                },
              };
              seriesDataArr.push(obj);
            });
          }
          this.barData2 = {
            xAxisData: ["能耗终端"],
            seriesData: seriesDataArr,
          };
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200503");
        });
    },
    handleReset() {
      this.$refs?.form?.resetFields();
      this.queryParams = {};
      this.netwoekChose = null;
      this.extraParams = {};
      this.radio1 = "0";
      this.radio2 = "0";
      this.handlerSearchDetail();
    },
    handlerLiandong(value) {
      this.netwoekChose = null;
      let result;
      if (value && value.length > 0) {
        result = value[value.length - 1];
      } else {
        result = null;
      }
      this.$refs?.form?.setFieldValue("sysDeptId", result);
      // 请求能耗终端
      this.extraParams = {
        sysDeptId: result,
      };
    },
    /* 选择能耗终端 */
    choseNetwork(value) {
      this.netwoekChose = value;
    },
    handlerChangeradio(flag) {
      if (flag == 1) {
        this.getbarData(this.queryParams);
      } else {
        this.getbarData2(this.queryParams);
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
  },
};
</script>

<style lang="scss" scoped>
.inline {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
